<template>
  <el-row class="container">
    <el-col :span="8" class="header">
      <div class="title">OneDay日记
      <el-popover
          class="popover"
          placement="top-start"
          title=""
          width="400"
          trigger="hover"
          content="一款以文字编辑、管理功能为基础的，日记可见范围随机，主打“交换日记”功能的web应用。">
          <el-button slot="reference">什么是OneDay？</el-button>
        </el-popover>
      </div>
    </el-col>

    <el-col :span="12" class="header">
      <el-autocomplete
      class="search"
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
      <el-button @click="search">搜索</el-button>
    </el-col>

    <el-col :span="4" class="header">
      <div class="userinfoContainer">
        <el-dropdown @command="handleCommand" spiltbutton type="primary">
  <span class="el-dropdown-link userinfo">
    {{currentUserName}}<i class="el-icon-arrow-down el-icon--right userinfo"></i>
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="DiaryMessage">收到日记</el-dropdown-item>
            <el-dropdown-item command="PersonalPage">个人主页</el-dropdown-item>
            <el-dropdown-item command="Logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>

    <el-col :span="24" style="height: 100%;">
      <el-container>
        <el-aside width="200px">
          <el-menu
            router="true"
            default-active="0"
            class="el-menu-vertical-demo" style="background-color: rgba(0, 0, 0, 0.08)">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>我的日记</span>
              </template>
              <el-menu-item index="1-1" route="/drafts"
              style="background-color: rgba(0, 0, 0, 0.04)">草稿箱</el-menu-item>
              <el-menu-item index="1-2" route="/published"
              style="background-color: rgba(0, 0, 0, 0.04)">已发表</el-menu-item>
              <el-menu-item index="1-3" route="/recycle"
              style="background-color: rgba(0, 0, 0, 0.04)">回收站</el-menu-item>
            </el-submenu>
            <el-menu-item index="2" route="/friend">
              <i class="el-icon-menu"></i>
              <span slot="title">找朋友</span>
            </el-menu-item>
            <el-menu-item index="3" route="/write">
              <i class="el-icon-setting"></i>
              <span slot="title">写日记</span>
            </el-menu-item>
            <el-menu-item index="4" route="/timeline">
              <i class="el-icon-time"></i>
              <span slot="title">时间线</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-col>
  </el-row>
</template>
<script>
  import Global from "../global.vue"
  export default{
    created:function(){
      console.log(this.currentUserName)
    },
    methods: {
      handleCommand(command){
        var _this = this;
        if (command == 'Logout') {
          this.$router.push("/");
          this.$confirm('注销登录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            _this.$http.get("/logout");
            _this.currentUserName = '游客';
            _this.$router.replace({path: '/'});
          }, function () {
            //取消
          })
        }
      }
    },
    mounted: function () {
      this.$http.get("/currentUserName").then(function (msg) {
        this.currentUserName = msg.bodyText;
      }, function (msg) {
        this.currentUserName = '游客';
      });
    },
    data(){
      return {
        currentUserName: localStorage.getItem("user_name")
      }
    }
  }
</script>
<style>
  .container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(235, 235, 235, 0.08);
  }

  .header {
    background-color: #335585;
    border-radius: 0px;
    height: 60px;
  }

  .title {
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    height: 60px;
  }

  .userinfo {
    color: #fff;
    cursor: pointer;
  }

  .userinfoContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    margin-right: 20px;
  }
  .popover{
    background-color: transparent;
    margin: 20px;
    padding: 20px;
  }
  .search{
    margin-top: 10px;
    width: 70%;
  }
  .search_button{
    width: 30%;
  }
</style>
